<template>
    <div>
        <el-dialog title="新建待办" width="600px" :visible.sync="dialogVisible">
            <el-form ref="ruleForm" :model="form" :rules="rules" label-width="100px">
                <el-row>
                    <el-col :span="24">
                        <el-form-item label="待办线索">
                            <el-input v-model="form.name" type="text" disabled placeholder="请输入" style="width: 100%;" />
                        </el-form-item>
                    </el-col>
                    <el-col :span="24">
                        <el-form-item prop="start_time" label="开始时间">
                            <el-date-picker
                                v-model="form.start_time"
                                format="yyyy-MM-dd HH:mm:ss"
                                value-format="yyyy-MM-dd HH:mm:ss"
                                type="datetime"
                                placeholder="请选择"
                                style="width: 100%;"
                            />
                        </el-form-item>
                    </el-col>
                    <el-col :span="24">
                        <el-form-item prop="end_time" label="结束时间">
                            <el-date-picker
                                v-model="form.end_time"
                                format="yyyy-MM-dd HH:mm:ss"
                                value-format="yyyy-MM-dd HH:mm:ss"
                                type="datetime"
                                placeholder="请选择"
                                style="width: 100%;"
                            />
                        </el-form-item>
                    </el-col>
                    <el-col :span="24">
                        <el-form-item prop="remind_time" label="提醒时间">
                            <el-date-picker
                                v-model="form.remind_time"
                                format="yyyy-MM-dd HH:mm:ss"
                                value-format="yyyy-MM-dd HH:mm:ss"
                                type="datetime"
                                placeholder="请选择"
                                style="width: 100%;"
                            />
                        </el-form-item>
                    </el-col>
                    <el-col :span="24">
                        <el-form-item prop="notice" label="信息">
                            <el-input v-model="form.notice" type="text" placeholder="请输入" style="width: 100%;" />
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="handleSubmit">确 定</el-button>
            </div>
        </el-dialog>
    </div>
</template>
<script>
import { addSomething } from '@/api/clue'
export default {
    name: 'ResvervationAddDialog',
    data() {
        return {
            dialogVisible: false,
            form: {
                id: '',
                start_time: '',
                end_time: '',
                remind_time: '',
                notice: ''
            },
            rules: {
                start_time: [{ required: true, message: '请选择开始时间', trigger: 'change' }],
                end_time: [{ required: true, message: '请选择结束时间', trigger: 'change' }],
                notice: [{ required: true, message: '请输入待办信息', trigger: 'change' }],
                remind_time: [{ required: true, message: '请选择提醒时间', trigger: 'change' }]
            }
        }
    },
    methods: {
        showDialog(item) {
            this.dialogVisible = true;
            this.resetParams();
            this.resetForm();
            if (item && item.id) {
                console.log(item)
                this.form.id = item.id;
                this.form.name = item.name;
            }
        },
        resetForm() {
            this.$nextTick(() => {
                this.$refs.ruleForm.resetFields();
            })
        },
        resetParams() {
            this.form = {
                id: '',
                start_time: '',
                end_time: '',
                remind_time: '',
                notice: ''
            };
        },
        handleSubmit(e) {
            this.$refs.ruleForm.validate(valid => {
                if (valid) {
                    addSomething(this.form).then(res => {
                        if (res.status == '1') {
                            this.$message.success('操作成功！')
                            this.$emit('success', res)
                        } else {
                            this.$message.error(res.message)
                        }
                    }).finally(() => {
                        this.dialogVisible = false
                    })
                }
            })
        }
    }
}
</script>